  <script setup>
  import {useUserStore} from "@/store/modules/student/index.js"
  import {ElMessage, ElMessageBox} from 'element-plus'
  import {useRouter} from "vue-router"

  const userStore = useUserStore();
  const userName = userStore.userInfo.userName;
  const userRole = userStore.userInfo.userRole === "0" ? '学生' : '教师';
  const router = useRouter()

  const menuList = [
    {
      title: '课程管理',
      icon: '',
      index: '1',
      children: [
        {
          title: '课程信息',
          icon: '',
          index: '1-1',
          router: '/student/courseInfo'
        },
        {
          title: '课程成绩',
          icon: '',
          index: '1-2',
          router: '/student/courseGrade'
        }
      ]
    },
    {
      title: '选课管理',
      icon: '',
      index: '2',
      children: [
        {
          title: '选课信息',
          icon: '',
          index: '2-1',
          router: '/student/chooseCourse'
        },
        {
          title: '选课结果',
          icon: '',
          index: '2-2',
          router: '/student/chooseResult'
        }
      ]
    }
  ]

  const logout = () => {
    ElMessageBox.confirm(
        '您确定要退出该系统吗?',
        '温馨提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }
    ).then(() => {
      ElMessage({
        type: 'success',
        message: '退出成功！',
      })
      setTimeout(3000)
      //清空用户数据
      userStore.userInfo = ''
      router.push("/login")
    }).catch(() => {
      ElMessage({
        type: 'info',
        message: '已取消',
      })
    })
  }

  </script>

  <template>
    <div class="container">
      <!--头部-->
      <div class="header">
        <div class="header-title">
          高校选课管理系统
        </div>
        <div class="header-userInfo">
          <div class="userInfo">
            <span style="padding-right: 25px">用户名:张zz
            </span>
            <span style="padding-left: 25px">用户角色:学生
            </span>
          </div>
          <div class="logout-btn">
            <el-button @click="logout">退出</el-button>
          </div>
        </div>
      </div>
      <!--侧边栏-->
      <div class="menu">
        <el-menu :router="true" default-active="1" background-color="#f0f0f3">
          <!--一级标题-->
          <el-sub-menu :index="item.index+''" v-for="item in menuList" :key="item.index">
            <template #title>
              <span>{{ item.title }}</span>
            </template>
            <!-- 二级标题-->
            <el-menu-item :index="subItem.router" v-for="subItem in item.children" :key="subItem.index">
              <template #title>
                <span>{{ subItem.title }}</span>
              </template>
            </el-menu-item>
          </el-sub-menu>
        </el-menu>
      </div>

      <!--内容页-->
      <div class="content">
        <router-view/>
      </div>
    </div>
  </template>

  <style scoped>

  .container {
    height: 100%;
  }

  .header {
    display: flex;
    position: fixed;
    width: 100%;
    height: 80px;
    border: 1px solid #000;
  }

  .header-title {
    flex: 1;
    font-size: 30px;
    font-weight: bolder;
    font-style: italic;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #84b1e7;
  }

  .header-userInfo {
    background-color: #84b1e7;
    flex: 3;
    display: flex;
    justify-content: end;

  }

  .userInfo {
    display: flex;
    align-items: center;
    margin-right: 50px;
  }

  .menu {
    border: 1px solid #000;
    height: 100%;
    width: 200px;
    position: fixed;
    top: 80px;
    background-color: #f0f0f3;
  }

  .content {
    border: 1px solid #000;
    position: fixed;
    top: 85px;
    left: 210px;
    width: 1310px;
    height: 660px;
  }

  .logout-btn {
    display: flex;
    align-items: center;
    margin-right: 10px;
  }
  </style>
